<template>
  <commonpanel title="世界网球赛事">
    <div class="contentbox">
      <div class="line0">
        <div class="desc">已办数量</div>
        <div class="resultinfo">
          <span>同比</span>
          <img :src="true ? upimg : downimg" alt="" />
          <span>10.5%</span>
        </div>
      </div>
      <div class="line1">
        <div class="innerbox2">
          <numboxlist :digit-num="8" :value="36" />
        </div>
        <div class="unitbox">个</div>
      </div>
      <div class="line2">
        <div class="itembox">
          <div class="itemwrap">
            <div class="titleline">计划数量</div>
            <div class="numline">{{ 236 }}</div>
            <div class="resultline">
              <span>同比</span>
              <img :src="false ? upimg : downimg" alt="" />
              <span>3.5%</span>
            </div>
          </div>
        </div>
        <div class="itembox itembox2">
          <div class="itemwrap">
            <div class="titleline">已办数量</div>
            <div class="numline">{{ 36 }}</div>
            <div class="resultline">
              <span>同比</span>
              <img :src="true ? upimg : downimg" alt="" />
              <span>10.5%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </commonpanel>
</template>
<script lang="ts" setup>
import upimg from '@/assets/img/up.png';
import downimg from '@/assets/img/down.png';

import commonpanel from '@/components/common/panel.vue';
import numboxlist from '@/components/common/numboxlist.vue';
</script>
<style lang="scss" scoped>
.contentbox {
  overflow: hidden;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.line0 {
  height: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 16px;
  overflow: hidden;

  .desc {
    float: left;

    font-size: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #ffffff;
    line-height: 20px;
  }

  .resultinfo {
    float: right;
    text-align: right;

    img {
      width: 20px;
      height: 20px;
      float: left;

      animation: breathe 1s ease-in-out infinite alternate;
      -webkit-animation: breathe 1s ease-in-out infinite alternate;
    }

    span {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
      float: left;
    }
  }
}

.line1 {
  margin-top: 16px;
  height: 36px;
  overflow: hidden;

  padding-left: 30px;
  padding-right: 30px;

  .innerbox2 {
    overflow: hidden;
    height: 36px;
    width: 326px;
    float: left;

    display: flex;
    justify-content: space-between;

    .numbox {
      flex: 1;
    }
  }

  .unitbox {
    font-size: 14px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #ffffff;
    line-height: 56px;
    height: 36px;
    float: left;
  }
}

.line2 {
  flex: 1;
  margin-left: 30px;
  margin-right: 30px;

  .itembox {
    width: 50%;
    height: 100%;
    float: left;
    text-align: center;

    .itemwrap {
      display: inline-block;
      height: 94px;
      width: 120px;
      margin-top: 10px;
      background-image: url('@/assets/img/img6.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;

      .titleline {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #fff;
        line-height: 18px;
        margin-top: 12px;
        opacity: 0.6;
      }

      .numline {
        font-size: 24px;
        font-family: D-DIN-Bold;

        color: #fff;
        line-height: 26px;
        margin-top: 6px;
      }

      .resultline {
        height: 20px;
        margin-top: 6px;
        text-align: center;

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          opacity: 0.6;
        }

        img {
          height: 20px;
          width: 20px;

          vertical-align: bottom;
          animation: breathe 1s ease-in-out infinite alternate;
          -webkit-animation: breathe 1s ease-in-out infinite alternate;
        }
      }
    }
  }
}
</style>
